<template>
  <div class="container">
    <topTitle :titleText="titleText" :titleExplain="titleExplain"></topTitle>
    <div class="mainCon">
      <div class="mainContent">
        <el-row
          class="custom-tree-container clearfix mainContentC"
          :gutter="20"
        >
          <!-- 树形结构部分 -->
          <el-col :span="5" class="block treeStyle fl">
            <el-tree
              :data="treeData"
              node-key="id"
              :expand-on-click-node="false"
              :render-content="renderContent"
              @node-click="handleNodeClick"
              @node-contextmenu="rihgtClick"
              :default-expanded-keys="isOpenTree"
              ref="tree"
              :highlight-current="true"
            >
            </el-tree>
            <!--鼠标右键点击出现页面-->
            <div v-show="menuVisible">
              <el-menu
                id="rightClickMenu"
                class="el-menu-vertical"
                @select="handleRightSelect"
                active-text-color="#fff"
                text-color="#fff"
              >
                <el-menu-item
                  index="1"
                  class="menuItem"
                  v-show="buttonLimitsArr.indexOf('ncEmployeeOn:update') > -1"
                >
                  <span slot="title">修改部门名称</span>
                </el-menu-item>
                <el-menu-item
                  index="2"
                  class="menuItem"
                  v-show="buttonLimitsArr.indexOf('ncEmployeeOn:add') > -1"
                >
                  <span slot="title">添加下级部门</span>
                </el-menu-item>
                <hr
                  style="color: #ffffff"
                  v-show="
                    buttonLimitsArr.indexOf('ncEmployeeOn:update') > -1 ||
                    buttonLimitsArr.indexOf('ncEmployeeOn:add') > -1
                  "
                />
                <el-menu-item
                  index="3"
                  class="menuItem"
                  v-show="buttonLimitsArr.indexOf('ncEmployeeOn:delete') > -1"
                >
                  <span slot="title">删除部门</span>
                </el-menu-item>
              </el-menu>
            </div>
          </el-col>
          <!-- 列表部分 -->
          <el-col :span="19" class="departmentPerson fl">
            <div>
              <!-- 部门功能部分 -->
              <div class="clearfix mB">
                <div class="fl">
                  <span class="showDepartment"
                    >{{ superiorDepartment }}
                    <span>( {{ parentNode.parentDepartCount }}人 )</span>
                  </span>
                </div>
                <div class="fr functionBut">
                  <el-link
                    @click="goModifyName"
                    v-show="buttonLimitsArr.indexOf('ncEmployeeOn:update') > -1"
                    >修改部门名称</el-link
                  >
                  <el-link
                    @click="goAddSubordinate"
                    v-show="buttonLimitsArr.indexOf('ncEmployeeOn:add') > -1"
                    >添加下级部门</el-link
                  >
                  <el-link
                    @click="delDepartment"
                    v-show="buttonLimitsArr.indexOf('ncEmployeeOn:delete') > -1"
                    >删除部门</el-link
                  >
                </div>
              </div>
              <!-- 在部门有成员的情况下-所拥有的功能 -->
              <div class="mB">
                <div class="functionBox">
                  <el-button
                    class="commonBut saveBtn funComBut"
                    icon="icon iconfont icontianjia"
                    @click="toAddEmployee"
                    v-if="buttonLimitsArr.indexOf('ncEmployeeOn:add') > -1"
                    ><span class="opetareText">添加人员</span></el-button
                  >

                  <el-button
                    class="commonBut funcStyle funComBut"
                    icon="icon iconfont icontiaozheng"
                    @click="goAdjustDepartment"
                    v-if="
                      isFunctionBut &&
                      buttonLimitsArr.indexOf('ncEmployeeOn:update') > -1
                    "
                    ><span class="opetareText">调整部门</span></el-button
                  >

                  <el-button
                    class="commonBut saveBtn funComBut"
                    icon="icon iconfont icondaochu"
                    @click="exporTableAjax"
                    v-if="
                      isFunctionBut &&
                      buttonLimitsArr.indexOf('ncEmployeeOn:export') > -1
                    "
                    ><span class="opetareText">导出报表</span></el-button
                  >
                  <!-- 批量导入员工 -->
                  <!-- 批量导入员工的权限和新增员工的权限相同 -->
                  <el-button
                    class="commonBut saveBtn funComBut"
                    icon="icon iconfont icondaoru"
                    @click="toAddMoreEmployee"
                    v-if="buttonLimitsArr.indexOf('ncEmployeeOn:add') > -1"
                    ><span class="opetareText">批量导入职工</span></el-button
                  >
                  <el-tooltip
                    class="item"
                    placement="top"
                    effect="dark"
                    content="需要添加的在职员工数量比较多时，建议使用“批量导入在职员工”功能"
                  >
                    <i class="icon iconfont iconhuabanfuben"></i>
                  </el-tooltip>
                </div>
              </div>
              <div class="mB">
                <div>
                  <el-input
                    placeholder="搜索员工姓名或身份证号"
                    v-model="filterField.keyword"
                    clearable
                    class="searchPerson"
                    @blur="filterField.keyword = changeValue($event)"
                  >
                  </el-input>
                  <el-checkbox
                    v-model="filterField.hasAccount"
                    true-label="0"
                    false-label=""
                    >只看无工资卡员工</el-checkbox
                  >
                  <el-checkbox
                    v-model="filterField.hasFile"
                    true-label="0"
                    false-label=""
                    >只看无合同附件员工</el-checkbox
                  >
                  <!-- <el-button type="primary" icon="icon iconfont iconchazhao1" class="commonBtn saveBtn" @click="search"></el-button> -->
                  <el-button
                    type="primary"
                    icon="icon iconfont iconchazhao1"
                    @click="search"
                    class="searchBtn"
                  >
                    <span>搜索</span>
                  </el-button>
                </div>
              </div>
              <!-- 部门列表 -->
              <div>
                <div>
                  <el-table
                    :data="employeeList"
                    @sort-change="sortChange"
                    :header-cell-style="{
                      background: '#eef1f6',
                      color: '#606266',
                    }"
                    highlight-current-row
                    stripe
                    style="border: 1px solid #dfe6ec"
                    @select="checkData"
                    :row-key="recordId"
                    ref="multipleTable"
                    @select-all="selectAll"
                    @selection-change="selectionChange"
                    v-loading="loading"
                  >
                    <el-table-column
                      type="selection"
                      width="50"
                      :reserve-selection="true"
                    >
                    </el-table-column>
                    <el-table-column prop="name" label="人员" width="230">
                      <template slot-scope="scope">
                        <!-- <span class="toDownload" @click="toEmployeeDetail(scope.$index, scope.row)">{{scope.row.name}}</span> -->
                        <el-link
                          type="primary"
                          v-if="isShowDetail"
                          @click="toEmployeeDetail(scope.$index, scope.row)"
                          style="font-size: 18px"
                          >{{ scope.row.name }}</el-link
                        >
                        <span v-else>{{ scope.row.name || '--' }}</span>
                        <p>{{ scope.row.idcard | deseHandler(4, 4, '*') }}</p>
                        <!-- <p style = "color:#999;font-size:14px;">{{scope.row.orgName}} <span v-if = "scope.row.employeeType">/</span> {{scope.row.employeeType}}</p> -->
                        <copyText
                          style="color: #999; font-size: 14px"
                          :tableIndex="scope.$index"
                          :copyTextName="
                            scope.row.orgName +
                            (scope.row.employeeType
                              ? '/' + scope.row.employeeType
                              : '')
                          "
                          :columnName="'orgName'"
                        ></copyText>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="createTime"
                      label="录入时间"
                      sortable="custom"
                      align="center"
                      min-width="200"
                    ></el-table-column>
                    <el-table-column
                      prop="startDate,endDate"
                      label="雇佣周期"
                      min-width="180"
                      align="center"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.startDate }}-{{ scope.row.endDate }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="accountId"
                      label="工资卡"
                      align="center"
                      min-width="120"
                    >
                      <template slot-scope="scope">
                        <p v-if="scope.row.accountId">
                          {{
                            scope.row.accountId | deseHandler(4, 4, '*') || ''
                          }}
                        </p>
                        <p
                          v-if="scope.row.bankName"
                          style="color: #999; font-size: 14px"
                        >
                          {{ scope.row.bankName || '' }}
                        </p>
                        <p v-if="!scope.row.accountId">未填写</p>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="hasFile"
                      label="合同附件"
                      align="center"
                      min-width="100"
                    >
                      <template slot-scope="scope">
                        <p
                          v-if="scope.row.hasFile == '0'"
                          style="color: #6dd400"
                        >
                          未上传
                        </p>
                        <p
                          v-else-if="scope.row.hasFile == '1'"
                          style="color: #e02020"
                        >
                          已上传
                        </p>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="快捷操作"
                      prop="hasFile"
                      min-width="140"
                      align="left"
                      fixed="right"
                    >
                      <template slot-scope="scope">
                        <el-link
                          type="primary"
                          @click="goEditPayCheck(scope.$index, scope.row)"
                          v-show="
                            buttonLimitsArr.indexOf('ncEmployeeOn:update') > -1
                          "
                          >编辑工资卡</el-link
                        >
                        <p>
                          <el-link
                            type="primary"
                            @click="goUploadContract(scope.$index, scope.row)"
                            v-show="
                              buttonLimitsArr.indexOf(
                                'company:employee:contractfile'
                              ) > -1
                            "
                            >合同附件</el-link
                          >
                        </p>
                        <p>
                          <el-link
                            type="primary"
                            @click="goSetQuit(scope.$index, scope.row)"
                            v-show="
                              buttonLimitsArr.indexOf('ncEmployeeOn:update') >
                              -1
                            "
                            >设为离职</el-link
                          >
                        </p>
                        <span
                          v-show="
                            !(
                              buttonLimitsArr.indexOf('ncEmployeeOn:update') >
                              -1
                            ) &&
                            !(
                              buttonLimitsArr.indexOf(
                                'company:employee:contractfile'
                              ) > -1
                            ) &&
                            !(
                              buttonLimitsArr.indexOf('ncEmployeeOn:update') >
                              -1
                            )
                          "
                          >--</span
                        >
                      </template>
                    </el-table-column>
                    <!-- 表格数据为空时，页面显示 -->
                    <div slot="empty" v-if="isShow">
                      <emptyTable :emptyText="emptyText"></emptyTable>
                    </div>
                  </el-table>
                  <Pagination
                    ref="pagination"
                    @getpageSize="getpageSize"
                    @getpageNo="getpageNo"
                    @getList="getDrawerTableList"
                    :requestUrl="drawerRequestUrl"
                    :filterField="filterField"
                    :pageSize="pageSize"
                    :pageSizes="pageSizes"
                  ></Pagination>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 修改名称弹框 -->
    <el-dialog
      title="修改名称"
      :visible.sync="dialogFormVisible"
      @close="closeDialog('form')"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="当前名称" :label-width="formLabelWidth">
          <span>{{ currentName }}</span>
        </el-form-item>
        <el-form-item
          label="修改为"
          :label-width="formLabelWidth"
          prop="modifyName"
        >
          <el-input
            v-model="form.modifyName"
            autocomplete="off"
            maxlength="32"
            class="inputWidth"
            @blur="form.modifyName = changeValue($event)"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancel('form')" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveModify"
          class="save"
          :loading="canLogin"
          >保存修改</el-button
        >
      </div>
    </el-dialog>
    <!-- 添加下级弹框 -->
    <el-dialog
      title="添加下级部门"
      class="oneColumnDialog"
      :visible.sync="addSubordinate"
      @close="closeDialog('addBox')"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      width="640px"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="addBox"
        label-width="120px"
        style="margin-top: 8px"
      >
        <el-form-item label="部门名称：" prop="departmentName">
          <el-input
            v-model="form.departmentName"
            autocomplete="off"
            maxlength="32"
            class="inputWidth"
            @blur="form.departmentName = changeValue($event)"
          ></el-input>
        </el-form-item>
        <el-form-item label="上级部门：">
          <span>{{ superiorDepartment }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancel('addBox')" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="addSubordinateDepart"
          class="save"
          :loading="canLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 设为离职 -->
    <el-dialog
      title="设为离职"
      class="oneColumnDialog"
      :visible.sync="setQuit"
      @close="closeDialog('quitBox')"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      width="640px"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="quitBox"
        label-width="120px"
        style="margin-top: 8px"
      >
        <el-form-item label="离职日期：" prop="departureDate">
          <el-date-picker
            v-model="form.departureDate"
            type="date"
            placeholder="请选择"
            :picker-options="pickerOptions"
            class="inputWidth"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="离职原因：" prop="departureReason">
          <el-input
            type="textarea"
            v-model="form.departureReason"
            maxlength="1000"
            placeholder="请输入离职原因"
            class="inputWidth"
            @blur="form.departureReason = changeValue($event)"
            rows="3"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancel('quitBox')" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveQuit"
          class="save"
          :loading="canLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 编辑工资卡 -->
    <el-dialog
      title="编辑工资卡"
      class="oneColumnDialog"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      @close="closeDialog('formData')"
      custom-class="brand-dialog-min-width"
      :modal-append-to-body="false"
      :append-to-body="true"
      width="640px"
    >
      <el-form
        :model="formData"
        :rules="formRules"
        ref="formData"
        label-width="150px"
      >
        <el-form-item label="人员姓名：">
          <span>{{ formData.name }}</span>
        </el-form-item>
        <el-form-item label="工资卡所属银行：" prop="bankId">
          <el-select
            v-model="formData.bankId"
            placeholder="请选择"
            class="optionWidth"
            clearable
            filterable
          >
            <el-option
              v-for="(item, index) of bankData"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工资卡号：" prop="accountId">
          <el-input
            v-model="formData.accountId"
            autocomplete="off"
            placeholder="请输入"
            class="inputWidth"
            @blur="formData.accountId = changeValue($event)"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancel('formData')" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="savePayCheckInfo('formData')"
          class="save"
          :loading="canLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- <editPayCheck :isEditPayCheck="isEditPayCheck" @isShowPayCheck="changeIsShowPay($event)" :editPayRowData="editPayRowData" :bankData = "bankData" :gitEmployeData = "getProjectList"></editPayCheck> -->
    <!-- 调整部门 -->
    <adjustDepartment
      :showAdjustDepartment="showAdjustDepartment"
      @isShowState="changeData($event)"
      :getTreeData="treeData"
      :checkedId="checkedId"
      :gitListData="getTree"
      @checkIds="changeCheckId($event)"
    ></adjustDepartment>
    <!-- 上传合同附件 -->
    <el-dialog
      title="附件"
      :visible.sync="uploadContract"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <!-- <uploadInput></uploadInput> -->
      <uploadAnnex
        @getFileList="getFileList"
        :limitationFactor="limitationFactor"
        @getFile="getFile"
        :upLoadFile="uploadImg"
      />,
      <div>
        <elementImage
          :upLoadFile="upLoadFile"
          :srcList="srcList"
          :oldSrcList="oldSrcList"
          @changeSrcList="changeSrcList"
        ></elementImage>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelUpload" class="cancel">取消</el-button>
        <el-button
          type="primary"
          @click.native="saveUpload"
          class="save"
          :loading="canLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import adjustDepartment from '@/components/publicCom/adjustDepartment'
import jqFrom from '../../kits/jquery.form'
import common from '../../kits/common'

export default {
  name: 'employeeOn',
  components: {
    adjustDepartment,
  },
  data() {
    return {
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        messageFileSizetip: '最多能上传5M以内的附件', //自定义id解决一个页面包含多个上传附件
        messagetip: '仅支持上传jpg、png、jpeg格式文件，图片大小不超过5M', //自定义报错提示语
        formatType: 'typeOne', //自定义上传格式校验类型
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        methodTip: '', //自定义上传文件提示
        uploadBtnType: 'typeTwo', //自定义上传按钮类型
      },
      treeData: [],
      titleText: '在职人员',
      titleExplain:
        '维护部门组织架构，将公司人员划分在不同的部门组织下，方便进行管理和按部门组织分配权限',
      menuVisible: false,
      //表格数据
      employeeList: [],
      pageSizes: [5, 10, 15, 20],
      //分页
      currentPage: 1,
      // total: 0,
      pageSize: 5,
      dialogFormVisible: false, // 修改名称弹框
      currentName: '', //当前名称
      addSubordinate: false, //添加下级弹框
      superiorDepartment: '', //上级部门名称
      setQuit: false, //设置离职
      // isEditPayCheck: false, //编辑工资卡
      formLabelCardWidth: '125px',
      formData: '', //编辑工资卡获取的行的数据
      formVisible: false, //编辑工资卡弹框
      formRules: {
        bankId: [
          {
            required: true,
            message: '工资卡所属银行不能为空',
            trigger: 'change',
          },
        ],
        accountId: [
          {
            required: true,
            pattern: /^\d{15,19}$/,
            message: '请输入正确的工资卡号',
            trigger: 'blur',
          },
        ],
      },
      form: {
        modifyName: '', //修改名称
        departmentName: '', //部门名称
        departureDate: '', //离职日期
        departureReason: '', //离职原因
      },
      formLabelWidth: '80px',
      rules: {
        modifyName: [
          {
            required: true,
            message: '修改部门名称不能为空',
            trigger: 'blur',
          },
        ],
        departmentName: [
          {
            required: true,
            message: '部门名称不能为空',
            trigger: 'blur',
          },
        ],
        departureDate: [
          {
            required: true,
            message: '离职日期不能为空',
            trigger: 'blur',
          },
        ],
        departureReason: [
          {
            required: true,
            message: '离职原因不能为空',
            trigger: 'blur',
          },
        ],
      },
      emptyText: '当前部门暂无成员',
      pickerOptions: this.processDate(),
      // isShowModify: false, //右键点击树是否显示修改名称
      // isShowDelDepartment: false, // 右键点击树是否显示删除部门
      filterField: {
        companyId: '',
        orgId: '', //部门id
        keyword: '', //搜索员工或身份证号
        hasAccount: '',
        hasFile: '',
      },
      pageSize: 20,
      pageNo: 1,
      showAdjustDepartment: false,
      uploadContract: false, //上传合同附件
      rightClickData: '', //右键点击获取的数据
      parentNode: {
        parentDepartId: '', //父节点部门id
        parentDepartName: '', //父节点部门名称
        parentDepartCount: '', //部门人数
      },
      // isShowModifyNameBut: false,
      // isShowDelBut: false,
      // url:
      //     "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [],
      drawerRequestUrl: 'api-e/nc/employee/expand/page',
      checkedId: [], //列表选中id数组
      rowData: {
        contractId: '', //获取列表行的id
        hireTime: '',
        name: '',
        idCard: '',
      },
      editPayRowData: '', //编辑工资卡获取的行的数据
      employeeId: '', //务工id
      contractId: '', //合同id
      bankData: [],
      isFunctionBut: false, //是否显示功能按钮
      edit: false,
      uploadImg: [],
      saveImgArr: [],
      isChildNodes: '',
      oldSrcList: [],
      isAllSelect: false,
      isOpenTree: [], //默认展开二级树
      isShow: false, //列表加载
      loading: true, //列表loading
      canLogin: false, //保存loading
      buttonLimitsArr: this.$store.state.buttonLimitsArr,
      isShowDetail: '',
    }
  },
  created() {
    this.$store.state.activeMenu = '/home/employee/employeeOn'
    //企业首页人员查询传参 By JY
    this.filterField.keyword = this.$route.query.name

    // this.getProjectList(this.currentPage, this.pageSize);
    this.getTree()
    this.getBankData()
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('ncEmployeeOn:detail') > -1
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    /**
     * @description: 获取上传的附件
     */
    getFileList(val) {
      this.oldSrcList.push(val)
      this.srcList.push(val)
    },
    /**
     * @description: 获取上传的附件
     */
    getFile(val) {
      this.uploadImg = val
      that.saveImgArr.push({
        originalName: val.name,
        relativePath: val.path,
        fileSize: val.size,
        fileType: val.contentType,
      })
    },
    getTree() {
      this.axios({
        method: 'get',
        url: 'api-c/organization/expand/arch',
      })
        .then((response) => {
          this.$refs.multipleTable.clearSelection()
          this.treeData = response.data.result
          this.superiorDepartment = this.treeData[0].orgName
          this.parentNode.parentDepartCount = this.treeData[0].employeeCount
          this.filterField.companyId = this.treeData[0].companyId
          this.filterField.orgId = this.treeData[0].id
          // 加载树取消全选
          this.isAllSelect = false
          // 默认展开二级
          this.treeData.forEach((m) => {
            this.isOpenTree.push(m.id)
          })
          if (this.rightClickData.id) {
            this.rightClickData.id = ''
          }
          this.$nextTick(function () {
            this.$refs.pagination.getTableListData()
            this.$refs.tree.setCurrentKey(this.treeData[0].id) //tree默认选中第一个
          })
          this.rightClickData.parentId = this.treeData[0].parentId
        })
        .catch((error) => {})
    },
    getDrawerTableList(data) {
      this.employeeList = data
      this.loading = false
      if (this.employeeList.length > 0) {
        this.isFunctionBut = true
      } else {
        this.isFunctionBut = false
        this.isShow = true
      }
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.data.orgName}</span>
        </span>
      )
    },
    // tree点击事件
    handleNodeClick(data, node, vuecomponent) {
      // 取消列表勾选
      this.$refs.multipleTable.clearSelection()
      this.checkedId = []
      this.isChildNodes = node.childNodes
      this.rightClickData = data
      this.menuVisible = false
      this.currentName = this.rightClickData.orgName
      this.superiorDepartment = this.rightClickData.orgName
      this.parentNode.parentDepartCount = this.rightClickData.employeeCount
      this.filterField.orgId = this.rightClickData.id
      this.$refs.pagination.getTableListData()
    },
    // 右键点击弹出
    rihgtClick(event, object, value, element) {
      this.isChildNodes = value.childNodes
      if (
        this.buttonLimitsArr.indexOf('ncEmployeeOn:update') == -1 &&
        this.buttonLimitsArr.indexOf('ncEmployeeOn:add') == -1 &&
        this.buttonLimitsArr.indexOf('ncEmployeeOn:delete') == -1
      ) {
        this.menuVisible = false
      } else {
        this.menuVisible = true
      }
      document.addEventListener('click', (e) => {
        this.menuVisible = false
      })
      let menu = document.querySelector('#rightClickMenu')
      /* 菜单定位基于鼠标点击位置 */
      menu.style.left = 150 + 'px'
      menu.style.top = event.clientY - 235 + 'px'
      menu.style.position = 'absolute' // 为新创建的DIV指定绝对定位
      menu.style.width = 130 + 'px'

      // 右键点击获取数据
      this.rightClickData = value.data
    },
    handleRightSelect(key) {
      if (key == 1) {
        if (
          this.rightClickData.parentId == undefined ||
          this.rightClickData.parentId == null
        ) {
          this.$message({
            type: 'warning',
            message: '不能修改企业名称',
          })
          return false
        }
        this.dialogFormVisible = true
        this.currentName = this.rightClickData.orgName //当前名称
      } else if (key == 2) {
        this.addSubordinate = true
        this.superiorDepartment = this.rightClickData.orgName
      } else if (key == 3) {
        // if(this.rightClickData.parentId == undefined || this.rightClickData.parentId == null) {
        //     this.$message({
        //         type: "warning",
        //         message: "不能删除企业"
        //     });
        //     return false;
        // }
        this.delDepartment()
      }
    },
    // 点击修改名称
    goModifyName() {
      if (
        this.rightClickData.parentId == undefined ||
        this.rightClickData.parentId == null
      ) {
        this.$message({
          type: 'warning',
          message: '企业不能修改名称',
        })
        return false
      }
      this.dialogFormVisible = true
      this.currentName = this.rightClickData.orgName //当前名称
      this.form.modifyName = ''
    },
    // 保存修改名称
    saveModify() {
      this.canLogin = true
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.axios({
            method: 'post',
            url: 'api-c/organization/expand/update',
            data: {
              id: this.rightClickData.id,
              orgName: this.form.modifyName,
            },
          })
            .then((response) => {
              this.canLogin = false
              if (!response.data.hasError) {
                this.dialogFormVisible = false
                this.$message({
                  type: 'success',
                  message: response.data.msg,
                })
                this.getTree()
                this.rightClickData.orgName = ''
              } else {
                this.$message({
                  type: 'error',
                  message: response.data.errorMsg,
                })
              }
            })
            .catch((error) => {
              this.canLogin = false
            })
        } else {
          this.canLogin = false
          return false
        }
      })
    },
    //关闭弹窗
    closeDialog(ele) {
      this.$refs[ele].resetFields()
    },
    // 点击添加下级按钮
    goAddSubordinate() {
      this.addSubordinate = true
      this.superiorDepartment = this.rightClickData.orgName
        ? this.rightClickData.orgName
        : this.superiorDepartment
      this.form.departmentName = ''
    },
    //添加下级部门
    addSubordinateDepart() {
      this.canLogin = true
      this.$refs['addBox'].validate((valid) => {
        if (valid) {
          this.axios({
            method: 'post',
            url: 'api-c/organization/expand/addchild',
            data: {
              companyId: this.rightClickData.companyId
                ? this.rightClickData.companyId
                : this.filterField.companyId,
              parentId: this.rightClickData.id
                ? this.rightClickData.id
                : this.filterField.orgId,
              orgName: this.form.departmentName,
            },
          })
            .then((response) => {
              this.canLogin = false
              if (!response.data.hasError) {
                this.addSubordinate = false
                this.$message({
                  type: 'success',
                  message: response.data.msg,
                })
                this.getTree()
                this.rightClickData.orgName = ''
              } else {
                this.$message({
                  type: 'error',
                  message: response.data.errorMsg,
                })
              }
            })
            .catch((error) => {
              this.canLogin = false
            })
        } else {
          this.canLogin = false
          return false
        }
      })
    },
    // 删除部门
    delDepartment() {
      if (
        this.rightClickData.parentId == undefined ||
        this.rightClickData.parentId == null
      ) {
        this.$message({
          type: 'warning',
          message: '企业不能删除',
        })
        return false
      }
      if (
        (this.rightClickData.employeeCount == 0 &&
          this.isChildNodes.length <= 0) ||
        !this.rightClickData.children
      ) {
        this.$confirm(
          '是否删除【' + this.rightClickData.orgName + '】部门?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            this.axios({
              method: 'post',
              url: 'api-c/organization/expand/deleteorg',
              data: {
                id: this.rightClickData.id,
              },
            })
              .then((response) => {
                if (!response.data.hasError) {
                  // this.dialogFormVisible = false;
                  this.$message({
                    type: 'success',
                    message: response.data.msg,
                  })
                  this.getTree()
                  this.rightClickData.orgName = ''
                } else {
                  this.$message({
                    type: 'error',
                    message: response.data.msg,
                  })
                }
              })
              .catch((error) => {})
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      } else {
        this.$alert('请移除此部门下的成员或子部门后，再删除此部门', '提示', {
          confirmButtonText: '确定',
          type: 'warning',
          callback: (action) => {
            // this.$message({
            //   type: 'info',
            //   message: `action: ${ action }`
            // });
          },
        })
      }
    },
    // 点击设为离职
    goSetQuit(index, row) {
      this.setQuit = true
      this.rowData.contractId = row.contractId
      this.rowData.hireTime = row.startDate
      this.name = row.name
      this.idCard = row.idcard
    },
    //保存离职
    saveQuit() {
      this.canLogin = true
      this.$refs['quitBox'].validate((valid) => {
        if (valid) {
          this.axios({
            method: 'post',
            url: 'api-e/nc/contract/expand/dismiss',
            data: {
              id: this.rowData.contractId,
              overDate: this.form.departureDate,
              overReason: this.form.departureReason,
            },
          })
            .then(
              (response) => {
                this.canLogin = false
                if (!response.data.hasError) {
                  this.$message({
                    type: 'success',
                    message: '设置成功',
                  })
                  this.setQuit = false
                  // this.$refs.pagination.getTableListData();  //列表中的按钮功能只加载列表
                  this.getTree()
                  this.getChildLaborWarning()
                } else {
                  this.$message({
                    type: 'success',
                    message: response.data.errorMsg,
                  })
                }
              },
              (response) => {
                this.canLogin = false
              }
            )
            .catch((error) => {
              this.canLogin = false
            })
        } else {
          this.canLogin = false
          return false
        }
      })
    },
    // // 编辑工资卡
    goEditPayCheck(index, row) {
      this.formVisible = true
      this.formData = Object.assign({}, row)
    },
    // 弹框的取消功能
    cancel(ele) {
      this.$refs[ele].resetFields()
      if (ele == 'form') {
        //取消保存修改名称
        this.dialogFormVisible = false
      } else if (ele == 'addBox') {
        //取消添加下级部门
        this.addSubordinate = false
      } else if (ele == 'quitBox') {
        //取消离职
        this.setQuit = false
      } else if (ele == 'formData') {
        this.formVisible = false
      }
    },
    //调整部门
    goAdjustDepartment() {
      if (this.checkedId.length > 0) {
        this.showAdjustDepartment = true
      } else {
        this.$message({
          type: 'error',
          message: '请勾选需要调整部门的人员',
        })
      }
    },
    changeData(data) {
      //调整部门子组件点击取消显示为false，子组件改变父组件的值
      this.showAdjustDepartment = data
    },
    // 上传合同附件
    goUploadContract(index, row) {
      this.contractId = row.contractId
      this.uploadImg = []
      this.saveImgArr = []
      this.srcList = []
      this.oldSrcList = []
      this.getUploadSearchImg(this.contractId)
      this.uploadContract = true
    },
    // changeIsShowPay(data) {
    //     // this.editPayRowData =  Object.assign({}, {});
    //     // this.isEditPayCheck = data;
    // },
    // 附件取消
    cancelUpload() {
      this.uploadContract = false
    },
    savePayCheckInfo() {
      this.canLogin = true
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.editPayCardInfo()
        } else {
          this.canLogin = false
          return false
        }
      })
    },
    editPayCardInfo() {
      this.axios({
        method: 'post',
        url: 'api-e/nc/contract/expand/setaccount',
        data: {
          id: this.formData.contractId,
          accountId: this.formData.accountId,
          bankId: this.formData.bankId,
        },
      })
        .then((response) => {
          this.canLogin = false
          if (!response.data.hasError) {
            this.$emit('isShowPayCheck', false)
            this.$message({
              type: 'success',
              message: response.data.msg,
            })
            this.$refs['formData'].resetFields()
            this.formVisible = false
            this.$refs.pagination.getTableListData(this.pageNo, this.pageSize) //列表中的按钮只加载列表
            // this.getTree();
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.canLogin = false
        })
    },
    // 列表搜索
    search() {
      this.$refs.pagination.getTableListData()
    },
    //列表多选选中事件
    checkData(selection, row) {
      var selected = selection.length && selection.indexOf(row) !== -1
      if (selected) {
        this.checkedId.push(row.contractId)
      } else {
        this.checkedId.forEach((item, i) => {
          if (item == row.contractId) {
            this.checkedId.splice(i, 1)
          }
        })
      }
    },
    toAddEmployee() {
      this.$router.push('/home/employee/employeeAdd')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/employee/employeeOn',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @name: 前往批量导入职工页面
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    toAddMoreEmployee() {
      this.$router.push({ name: 'batchImport' })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/employee/employeeOn',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //显示人员详情传参
    toEmployeeDetail(index, row) {
      this.employeeId = row.id
      this.contractId = row.contractId
      this.$router.push({
        path: '/home/employee/employeeDetail/',
        name: 'employeeDetail',
        query: {
          employeeId: this.employeeId,
          contractId: this.contractId,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/employee/employeeOn',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 获取编辑工资卡银行数据
    getBankData() {
      this.axios({
        method: 'get',
        url: 'api-bs/base/dicitem/findbytype?type=' + 'BANK_TYPE',
      })
        .then((response) => {
          this.bankData = response.data.result
        })
        .catch((error) => {})
    },
    processDate() {
      var that = this
      return {
        disabledDate(time) {
          var hiringTime = that.rowData.hireTime.toString()
          // 解决在ie中的兼容问题 需要转成/
          hiringTime = hiringTime.replace(/\./g, '/')
          if (hiringTime) {
            return time.getTime() < new Date(hiringTime).getTime()
          }
        },
      }
    },
    //导出工资表
    exporTableAjax() {
      // var id = row.id;
      if (this.employeeList.length > 0) {
        window.location.href =
          common.commonApi +
          'api-e/nc/employee/expand/export/onjob?orgId=' +
          this.filterField.orgId +
          '&sortField=' +
          this.filterField.sortField +
          '&sort=' +
          this.filterField.sort +
          '&access_token=' +
          localStorage.getItem('access_token')
      } else {
        this.$message({
          type: 'error',
          message: '无数据导出',
        })
      }
    },

    delFile(index) {
      this.uploadImg.splice(index, 1)
      this.saveImgArr.splice(index, 1)
    },
    //保存附件
    saveUpload() {
      this.canLogin = true
      var data = {
        files: this.packageParams(this.saveImgArr),
        contractId: this.contractId,
      }
      this.axios({
        method: 'post',
        url: 'api-e/nc/contract/expand/filed',
        data: data,
      })
        .then((response) => {
          this.canLogin = false
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: response.data.result,
            })
            this.uploadContract = false
            // this.getTree();
            this.$refs.pagination.getTableListData(this.pageNo, this.pageSize) //列表中的按钮只加载列表
          } else {
            this.$message({
              type: 'error',
              message: '保存失败',
            })
          }
        })
        .catch((error) => {
          this.canLogin = false
        })
    },
    // 获取附件查询图片
    getUploadSearchImg(contractId) {
      var data = {
        associatedName: 'T_NC_CONTRACT',
        associatedId: contractId,
      }
      this.axios({
        method: 'post',
        url: 'api-f/files/list',
        data: data,
      })
        .then((response) => {
          //    this.bankData = response.data;
          if (!response.data.hasError) {
            this.uploadImg = response.data.result
            for (var i = 0; i < this.uploadImg.length; i++) {
              this.saveImgArr.push({
                originalName: this.uploadImg[i].originalName,
                relativePath: this.uploadImg[i].relativePath,
                fileSize: this.uploadImg[i].fileSize,
                fileType: this.uploadImg[i].fileType,
              })
              this.srcList.push(this.uploadImg[i].absolutePath)
              this.oldSrcList.push(this.uploadImg[i].absolutePath)
            }
          } else {
            this.$message({
              type: 'error',
              message: '数据获取失败',
            })
          }
        })
        .catch((error) => {})
    },
    recordId(row) {
      return row.id
    },
    /**
     * @description: 改变图片地址
     */
    changeSrcList(val) {
      this.srcList = val
    },
    changeCheckId(data) {
      //调整部门--保存
      this.checkedId = data
    },

    selectionChange(rows) {
      for (var i = 0; i < rows.length; i++) {
        this.checkedId.push(rows[i].contractId)
      }
    },
    selectAll(selection) {
      this.isAllSelect = !this.isAllSelect
      if (this.isAllSelect) {
        this.employeeList.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row, true)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 童工预警接口
    getChildLaborWarning() {
      var data = {
        companyId: this.filterField.companyId,
        idCard: this.idCard,
        name: this.name,
      }
      this.axios({
        method: 'post',
        url: 'api-a/nc/alert/base/removechildalert',
        data: data,
      })
        .then((response) => {})
        .catch((error) => {})
    },
  },
  watch: {
    employeeList: {
      handler(value) {
        //调整部门全选
        if (this.isAllSelect) {
          let that = this
          let len = that.checkedId.length
          value.forEach((row) => {
            for (let i = 0; i < len; i++) {
              if (row.contractId === that.checkedId[i]) {
                that.$refs.multipleTable.toggleRowSelection(row, false)
                break
              } else {
                that.$refs.multipleTable.toggleRowSelection(row, true)
              }
            }
          })
        }
      },
      deep: true,
    },
  },
}
</script>

<style scoped lang="less">
@import '../../../static/css/filterArea.less';
.container {
  .mB {
    margin-bottom: 24px;
  }
  /* height: 95%; */
  .mainCon {
    padding: 24px;
    height: calc(100% - 67px);
    .titleDescribe {
      font-size: 14px;
    }
    .treeStyle {
      /* min-width:300px;  */
      height: 100%;
      height: 696px;
      background: #ebf0f5;
      padding: 24px;
      overflow: auto;
      .el-tree {
        background: #ebf0f5 !important;
      }
    }
    .el-menu-vertical {
      border: 3px solid rgb(84, 92, 100);
      border-radius: 10px;
      z-index: 100;
    }
    .departmentPerson {
      /* margin-left: 18px; */
      padding-top: 24px;
      /* padding-right:38px !important; */
      padding-left: 24px !important;
      /* width: 70%; */
      /* min-width:300px; */
      height: 100%;
      .NoPersonnel {
        text-align: center;
        margin-top: 80px;
      }
      .showDepartment {
        font-size: 18px;
      }
      .functionBut {
        .el-link {
          font-size: 14px;
          padding: 0 5px;
          border-right: 1px solid #409eff;
          color: #409eff;
          cursor: pointer;
          &:last-child {
            border: 0 !important;
          }
        }
      }
      .functionBox {
        /* span {
                    display: inline-block;
                    width: 110px;
                    height: 36px;
                    text-align: center;
                    line-height: 36px;
                    color: #fff;
                    border-radius: 5px;
                    background: #3e5265;
                    font-size: 14px;
                    cursor: pointer;
                    &:nth-child(1) {
                        background: #009588 !important;
                    }
                } */
        .funcStyle {
          background-color: #3e5265;
          border-color: #3e5265;
          color: #fff;
          margin-left: 5px;
          &:hover {
            background-color: #3e5265;
            border-color: #3e5265;
            color: #fff;
            opacity: 0.8;
          }
        }
      }
      .searchPerson {
        width: 35% !important;
        margin-right: 24px;
        line-height: 40px;
        input {
          width: 100%;
        }
      }
      .el-checkbox {
        margin-right: 24px !important;
      }
      .searchBut {
        padding: 10px;
        background: #009588 !important;
      }
    }
    .mainContent {
      height: 90%;
      .mainContentC {
        height: 90%;
        margin-left: 0 !important;
      }
    }
    .item {
      color: #666;
      vertical-align: middle;
      margin-left: 8px;
    }
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .menuItem {
    height: 40px;
    line-height: 40px;
    background-color: #545c64;
    font-size: 14px;
  }
  .menuItem:hover {
    background-color: #409eff;
  }
  /* checkbox 选中颜色设置 */
  /deep/ .is-checked {
    .el-checkbox__inner {
      background-color: #3189ea;
      border-color: #3189ea;
    }
  }
  /deep/.el-checkbox__inner:hover {
    border-color: #3189ea;
  }
  /deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #3189ea;
  }
  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #3189ea;
  }
  /deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #3189ea !important;
    border-color: #3189ea !important;
  }
  /deep/ .el-dialog {
    width: 550px !important;
  }
  /* /deep/ .el-image-viewer__wrapper {
        position: fixed;
        top: -100px;
        right: 0;
        bottom: 0;
        left: -100px;
        height: 600px;
        width: 800px;
    } */
  /* 兼容ie10 */
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /deep/ .el-image-viewer__wrapper {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: -100px;
      height: auto;
      width: auto;
    }
  }
  .toDownload {
    font-size: 14px;
    color: #0070f5;
    cursor: pointer;
  }
  .AddEmployeeBut {
    color: #0070f5;
    font-size: 14px;
    cursor: pointer;
  }
  .uploadBox {
    position: relative;
    .upLoadDom {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      input {
        width: 136px;
        height: 36px;
      }
    }
  }
  .imgStyle {
    margin-top: 20px;
    li {
      position: relative;
      margin-right: 20px;
      margin-top: 10px;
      i {
        position: absolute;
        right: -6px;
        top: -10px;
        font-size: 20px;
      }
    }
  }
  .addButSty {
    background: #009588;
    border: 1px solid #009588;
    color: #fff;
    &:hover {
      background: #009588;
      border: 1px solid #009588;
      color: #fff;
      opacity: 0.8;
    }
  }

  /deep/ .custom-tree-node {
    width: 100% !important;
    float: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
  }

  /deep/.el-tree-node__content {
    height: initial;
    line-height: initial;
    background-color: #ebf0f5;
  }
  /deep/.el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: #ebf0f5;
  }
  @media screen and (min-width: 1360px) and (max-width: 1366px) {
    .treeStyle {
      width: 21%;
    }
    .departmentPerson {
      width: 79%;
    }
  }
  @media screen and (min-width: 1176px) and (max-width: 1280px) {
    .treeStyle {
      width: 20%;
    }
    .departmentPerson {
      width: 80%;
    }
  }
}
/deep/ .el-pagination {
  margin-bottom: 40px;
}
</style>
